<template>
  <div class="page-container">
    <div ref="con" class="container-chart">
      <!-- 第一个页面 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      yData: [],
      seriesData: [],
      chart: "", //设置一个变量 用于接收下面的初识容器
    };
  },
  mounted() {
    // console.log(this.$store.getters.getColor,'标题颜色');
    //设置监听事件
    window.addEventListener("resize", () => {
      // console.log(this.$refs.con.offsetWidth, "监听到尺寸变化了");
      this.screen();
    });
    //生命周期之挂载
    //页面一加载调用排行榜接口
    this.getData();
  },
  destroyed() {
    //移除你的事件监听
    window.removeEventListener("resize", this.screen);
  },
  //设置一个计算属性
  computed: {
    newColor() {
      return this.$store.getters.getColor;
    },
  },
  watch: {
    //监听color
    newColor() {
      console.log("监听中11111111");
      //先销毁实例 数据图表  我们自己创建的实例进行销毁
      this.chart.dispose();
      // //重新初始化
      this.initEchart();
      this.screen();
    },
  },
  methods: {
    //封装一个改变图形的函数
    screen() {
      //可视宽度
      let width = this.$refs.con.offsetWidth;
      //设置字体的大小号
      //这个公式是我们自己测试出来
      let num = (width / 100) * 6;
      //改变数据图形的大小
      this.chart.resize();
      //重新去创建一个配置项
      let option = {
        title: {
          text: "各地区种植面积统计Top10",
          textStyle: {
            fontSize: num,
            color: this.newColor,
          },
        },
      };
      //重新设置一下配置项
      this.chart.setOption(option);
    },
    //方法
    //设置一个初始化echarts方法
    //async initEchart() {
    initEchart() {
      //初始化
      let myChart = this.$echarts.init(this.$refs.con);
      this.chart = myChart;
      // await this.$axios
      //配置项
      let options = {
        title: {
          text: "各地区种植面积统计Top10",
          //  这里面的位置 left top right  bottom 属于标题的，并没有办法把这个图形 往下推
          left: "5%",
          top: "3%",
          textStyle: {
            color: this.newColor,
          },
        },
        grid: {
          // 组件离容器的位置变化
          // 这里面的位置 left top right  bottom
          //利用百分比去挪动位置
          left: "15%",
          top: "15%",
          right: "10%",
          bottom: "10%",
        },
        //提示组件
        tooltip: {
          show: true,
        },
        xAxis: {
          //x轴
          //是否显示坐标轴的轴线
          axisLine: {
            show: true,
          },
          //坐标轴的刻度
          axisTick: {
            show: true,
          },
        },
        yAxis: {
          //y轴
          // data: ["玉米", "黄豆", "小麦", "甘蔗"],
          data: this.yData,
        },
        //数据列
        series: {
          type: "bar", // 柱状图bar  一般默认不写 line 折线图
          // data:[100,80,70,556]
          data: this.seriesData,
          //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
          label: {
            show: true,
            //文字类型的定位，一般是 top right  left bottom ....
            position: "right",
          },
          itemStyle: {
            // color:'tomato',//设置固定值
            color: {
              //自定义配置颜色
              //线性渐变
              // 起点和终点  x,y  起点  x1,y1 终点
              type: "line",
              x: 0,
              y: 0,
              x1: 1,
              y1: 0,
              //小案例  color: ["#6EABDA", "#2D5A7D"],
              colorStops: [
                {
                  offset: 0,
                  color: "#6EABDA",
                },
                {
                  offset: 1,
                  color: "#2D5A7D",
                },
              ],
            },
          },
        },
      };
      //设置配置项
      myChart.setOption(options);
    },
    //获取接口方法
    getData() {
      this.$axios.get("/plantingAreaTop").then((res) => {
        console.log(res, "响应");
        //数组的排序方法。进行排序 按照升序或者降序
        res.data.sort((a, b) => a.area - b.area);
        this.yData = res.data.map((item) => item.name);
        this.seriesData = res.data.map((item) => item.area);
        this.$nextTick(() => {
          //调用echart
          this.initEchart();
          this.screen();
        });
      });
    },
  },
};
</script>
